<template>
  <div class="drawingBoard">
    <canvas
      id="drawingBoard"
      @mousedown="startDrawing"
      @mouseup="endDrawing"
      @mouseleave="endDrawing"
      @mousemove="Drawing"
    ></canvas>
    <button @click="downLoad">导出</button>
    <button @click="previousStep">上一步</button>
    <button @click="nextStep">下一步</button>
    <button @click="canvasEmptying">清空</button>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import draw from './draw'

const { startDrawing, Drawing, endDrawing, downLoad, canvasEmptying, previousStep, nextStep } = draw('#drawingBoard')
</script>
<style lang="scss" scoped>
.drawingBoard {
  text-align: center;
  font-size: 0px;
  #drawingBoard {
    height: 500px;
    width: 500px;
    border: 1px solid #66ccff;
    box-sizing: content-box;
  }
}
</style>
